<template>
  <el-echarts theme="green" :height="height" :option="option"></el-echarts>
</template>
<script>
import { stringGbLength } from '@vimi/utils-tool'
// import { echartsXFormatter } from '@vimi/utils-tool'
import { gbSubstr } from '@/common/plugins/tools/string'

const MAX_LABEL_LENGTH = 40

export default {
  components: {},
  props: {},
  data() {
    return {
      option: null,
      height: '400',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      let serviceId = this.$store.getters.org.clientId
      const [res] = await this.$utils.promise(
        this.$api.getDataQuery(
          'credit',
          'credit_level_review_funds_view',
          `?groupFields=bank_name&groupFunc=SUM(credit_level_review_funds_view.reply_funds)&fields=bank_name&where=%22credit_level_review_funds_view.is_approval%22.eq(1)&orWhere=%22credit_level_review_funds_view.service_id%22.eq(${serviceId})%26%22credit_level_review_funds_view.recommend_service%22.eq(${serviceId})`
        )
      )
      const data = ((res && res.data) || []).map(item => {
        const p = Number.parseFloat(item.p)
        item.p = isNaN(p) ? 0 : p
        return item
      })
      data.sort((a, b) => a.p - b.p)

      const xData = []
      const aData = []
      let bData = []

      let amountAll = 0
      let maxLen = 0

      for (const p of data) {
        const name = p.bank_name
        const len = stringGbLength(name)
        maxLen = Math.max(len, maxLen)
        xData.push(name || '-')

        aData.push(p.p)
        amountAll += p.p
      }

      bData = aData.map(item => {
        return amountAll > 0 ? Math.round((item / amountAll) * 10000) / 100 : '-'
      })

      const chartData = {
        title: '银行放款分析',
        subtext: '',
        legend: ['金额（万元）', '占比（%）'],
        xData: xData,
        left: maxLen * 6 + 20,
        seriesData: [
          {
            name: '占比（%）',
            type: 'line',
            data: bData,
            smooth: true,
            tooltip: {
              formatter: '{b} : {c} ({d}%)',
            },
            itemStyle: {
              normal: {
                color: '#F4516F',
              },
            },
          },
          {
            name: '金额（万元）',
            type: 'bar',
            barMaxWidth: 30,
            data: aData,
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#48CF5E',
                label: { show: true, position: 'right' },
              },
            },
          },
        ],
      }
      this.setOption(chartData)
      this.height = Math.max(xData.length * 30 + 80, 280)
    },
    setOption(data) {
      this.option = {
        title: {
          text: data.title,
          subtext: data.subtext,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: data.legend,
          top: 20,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          top: 80,
          left: data.left,
          right: 80,
          bottom: 30,
        },
        xAxis: [
          {
            type: 'value',
            name: '占比（%）',
            max: 100,
          },
          {
            type: 'value',
            name: '金额（万元）',
          },
        ],
        yAxis: [
          {
            type: 'category',
            data: data.xData,
            axisLabel: {
              interval: 0,
              formatter: v => {
                const len = stringGbLength(v)
                if (len > MAX_LABEL_LENGTH) {
                  v = gbSubstr(v, MAX_LABEL_LENGTH, true)
                }
                return v
              },
            },
          },
        ],
        series: data.seriesData,
      }
    },
  },
}
</script>
<style scoped></style>
